<template>
  <div class="equipment-repair-page">
    <div class="page-header">
      <h2>
        <el-icon><Tools /></el-icon>
        故障维修管理
      </h2>
      <el-button type="primary" @click="handleCreateRepair">
        <el-icon><Plus /></el-icon>
        新建维修单
      </el-button>
    </div>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :span="6">
        <el-card class="stat-card">
          <el-statistic title="待维修" :value="statistics.pending" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <el-statistic title="维修中" :value="statistics.repairing" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <el-statistic title="本月维修" :value="statistics.thisMonth" />
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card class="stat-card">
          <el-statistic title="平均修复时长" :value="statistics.avgTime" suffix="小时" />
        </el-card>
      </el-col>
    </el-row>

    <!-- 维修列表 -->
    <el-card>
      <el-table :data="repairList" stripe>
        <el-table-column prop="code" label="维修单号" width="150" />
        <el-table-column prop="equipmentName" label="设备名称" min-width="150" />
        <el-table-column prop="faultLevel" label="故障等级" width="100">
          <template #default="{ row }">
            <el-tag :type="getLevelColor(row.faultLevel)">
              {{ row.faultLevel }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="faultDesc" label="故障描述" min-width="200" show-overflow-tooltip />
        <el-table-column prop="reporter" label="报修人" width="100" />
        <el-table-column prop="repairman" label="维修人" width="100" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusColor(row.status)">
              {{ getStatusName(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="reportTime" label="报修时间" width="160" />
        <el-table-column label="操作" width="180" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" size="small" text @click="handleView(row)">
              查看
            </el-button>
            <el-button type="success" size="small" text @click="handleProcess(row)" v-if="row.status === 'pending'">
              处理
            </el-button>
            <el-button type="warning" size="small" text @click="handleComplete(row)" v-if="row.status === 'repairing'">
              完成
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 新建维修单对话框 -->
    <el-dialog v-model="showDialog" title="新建维修单" width="700px">
      <el-form :model="repairForm" label-width="100px">
        <el-form-item label="选择设备" required>
          <el-select v-model="repairForm.equipmentId" placeholder="请选择设备" style="width: 100%">
            <el-option label="数控车床 EQ-CNC-001" value="1" />
            <el-option label="加工中心 EQ-CNC-002" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="故障等级" required>
          <el-select v-model="repairForm.faultLevel" placeholder="请选择" style="width: 100%">
            <el-option label="A级-紧急" value="A级" />
            <el-option label="B级-严重" value="B级" />
            <el-option label="C级-一般" value="C级" />
            <el-option label="D级-轻微" value="D级" />
          </el-select>
        </el-form-item>
        <el-form-item label="故障描述" required>
          <el-input v-model="repairForm.faultDesc" type="textarea" :rows="4" placeholder="详细描述故障现象..." />
        </el-form-item>
        <el-form-item label="影响范围">
          <el-input v-model="repairForm.impact" placeholder="如：停产、效率降低50%等" />
        </el-form-item>
        <el-form-item label="上传照片">
          <el-upload list-type="picture-card" :auto-upload="false">
            <el-icon><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showDialog = false">取消</el-button>
        <el-button type="primary" @click="handleSubmitRepair">提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Tools, Plus } from '@element-plus/icons-vue'

const showDialog = ref(false)

const statistics = reactive({
  pending: 5,
  repairing: 3,
  thisMonth: 28,
  avgTime: 4.5
})

const repairList = ref([
  {
    id: 1,
    code: 'REP-2024-001',
    equipmentName: '数控车床',
    faultLevel: 'A级',
    faultDesc: '主轴异常震动，无法正常加工',
    reporter: '张三',
    repairman: '孙八',
    status: 'pending',
    reportTime: '2024-10-14 08:30'
  },
  {
    id: 2,
    code: 'REP-2024-002',
    equipmentName: '自动焊接机',
    faultLevel: 'C级',
    faultDesc: '冷却系统效率降低',
    reporter: '李四',
    repairman: '周九',
    status: 'repairing',
    reportTime: '2024-10-13 14:20'
  }
])

const repairForm = reactive({
  equipmentId: '',
  faultLevel: '',
  faultDesc: '',
  impact: ''
})

const getLevelColor = (level) => {
  const map = { 'A级': 'danger', 'B级': 'warning', 'C级': 'info', 'D级': '' }
  return map[level] || ''
}

const getStatusName = (status) => {
  const map = { pending: '待维修', repairing: '维修中', completed: '已完成' }
  return map[status] || status
}

const getStatusColor = (status) => {
  const map = { pending: 'warning', repairing: 'primary', completed: 'success' }
  return map[status] || ''
}

const handleCreateRepair = () => {
  showDialog.value = true
}

const handleView = (row) => {
  ElMessage.info(`查看维修单：${row.code}`)
}

const handleProcess = (row) => {
  ElMessage.info(`开始处理维修单：${row.code}`)
}

const handleComplete = (row) => {
  ElMessage.success(`维修单${row.code}已完成`)
}

const handleSubmitRepair = () => {
  showDialog.value = false
  ElMessage.success('维修单提交成功，已通知维修人员')
}
</script>

<style scoped>
.equipment-repair-page {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  text-align: center;
}
</style>

